<template>
  <div>
    <div class="right">
      <a href="javascript:void (0)" v-routers="{path:'/'}"></a>
    </div>
    <div class="card">
      <el-input style="width: 260px;margin-right: 10px" placeholder="请输入用户名称"></el-input>
      <el-select style="width: 260px;margin-right: 10px" v-model="value" placeholder="请选择班级">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select style="width: 260px;margin-right: 10px" v-model="value2" placeholder="请选择课程名称">
        <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select style="width: 260px;margin-right: 10px" v-model="value1" placeholder="请选择是否签到">
        <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button class="defaultBtn" icon="el-icon-search" color="#333" type="info">查询</el-button>
      <el-button class="defaultBtn" icon="el-icon-refresh-right"  type="info">重置</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="学生姓名" min-width="180"></el-table-column>
      <el-table-column prop="class" label="班级名称" min-width="180"></el-table-column>
      <el-table-column prop="major" label="专业名称" min-width="180"></el-table-column>
      <el-table-column prop="major" label="课程名称" min-width="180"></el-table-column>
      <el-table-column prop="major" label="是否旷课" min-width="180">
        <template #default="{row}">
          <span :style="{color:row.type ===0 ? '#f53015':'#00790E'}">  {{type(row)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="crateTime" label="上课时间" min-width="180"></el-table-column>
      <el-table-column prop="count" label="课程评分" min-width="180"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible:false,
      tableData: [
          {
            name:'王刘宏',
            class:'计算机科学与网络3班',
            major:'计算机科学与网络',
            type:0,
            crateTime:'2022-12-31 12:00:00',
            count:80
          }],
      options: [
        {value:0,label: '计算机一班'},
        {value: 1, label: '计算机二班'},
        {value: 2, label: '计算机三班'},
        {value: 3, label: '计算机四班'},
        {value: 4, label: '计算机五班'}],
      value: '',
      options1:[
        {value:0,label: '已签到'},
        {value: 1, label: '未签到'},
      ],
      value1: '',
      options2: [
        {value:0,label: '计算机科学与网络'},
        {value: 1, label: '高等数学'},
        {value: 2, label: '线性代数'},
        {value: 3, label: '计算机基础'},
        {value: 4, label: '计算机网络安全'}],
      value2: '',
    }
  },
  methods:{
    type(item){
      console.log(item)
      switch (item.type){
        case 0:{
          return '未签到'
        }
        case 1:{
          return  '已签到'
        }
      }
    },
    handleClose(){
      this.dialogVisible=false
    }
  }
}
</script>

<style scoped lang="scss">

.card{
  width: 100%;
  margin: 10px 0;
}
.page{
  width: 100%;
  display: flex;
  justify-content: right;
  margin-top: 10px;
}
::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active ){
  background: #333 !important;
  color: #fff;
}
</style>
